<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue笔记</title>
    <style>
        div{
            width:80%;
            margin:30px auto;
            
        }
    </style>
</head>

<body>
    <div>
        <h2>一、生命周期钩子</h2>
        <p>
            理解：可以认为是事件，钩子是随着Vue运行开始而开始，运行结束而结束；</br>
            各个钩子在不同的阶段被调用，调用它们的是Vue实例;</br>
            各个钩子的类型都是function
        </p>
        <ul>
            <li>
                <h3>1.beforeCreate：</h3>
                在实例初始化之后，数据观测和事件配置之前被调用</br>
            </li>
            </br>
            <li>
                <h3> 2.created：</h3>
                在实例创建完成后被立即调用；</br>
                会去找有没有el和template，都有的情况下会将模板编译成渲染函数；</br>
                如果没有el，就会调用vm.$mount(el)，再去找有没有template；</br>
                如果没有template，就会将el对应的HTML编译成模板；</br>
                挂载阶段还没开始，$el 属性目前不可见。
            </li>
            </br>
            <li>
                <h3>3.beforeMount：</h3>
                在挂载开始之前被调用：相关的 render 函数首次被调用；</br>
                在创建vm.$(el)之前的钩子，即无法调用$(el)；</br>
                注意：vm.$(el)是替换之前申明的el；</br>
                该钩子在服务器端渲染期间不被调用
            </li>
            </br>
            <li>
                <h3>4.mounted: </h3>
                在创建vm.$(el)之后的钩子，可以调用$(el)；</br>
                即el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子；</br>
                该钩子在服务器端渲染期间不被调用
            </li>
            </br>
            <li>
                <h3>5.beforeUpdate：</h3>
                数据更新时调用；</br>
                该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行
            </li>
            </br>
            <li>
                <h3>6.update：</h3>
                由于数据更改导致重新渲染，在这之后会调用该钩子；</br>
                当这个钩子被调用时，组件已经更新，所以现在可以执行操作；</br>
                该钩子在服务器端渲染期间不被调用。
            </li>
            </br>
            <li>
                <h3>7.beforeDestroy：</h3>
                实例销毁之前调用。在这一步，实例仍然完全可用；</br>
                该钩子在服务器端渲染期间不被调用。
            </li>
            </br>
            <li>
                <h3>8.destroy：</h3>
                Vue 实例销毁后调用；</br>
                调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁；</br>
                该钩子在服务器端渲染期间不被调用。
            </li>
            </br>
        </ul>
        <h2>二、el</h2>
        <p>
            类型：字符串或者HTML元素
        </p>
        <p>
            遵守new创建的实例，提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
        </p>
        <p>
            可以是 CSS 选择器，也可以是一个 HTMLElement 实例
        </p>
        <h2>
            三、template
        </h2>
        <p>
            类型：字符串
        </p>
        <p>
            需要在HTML中创建一个template标签，标签里的id对应Vue里面的template；
        </p>
        <p>
            template标签里面有且只能有一个根标签
        </p>
        <h2>
           四、 data
        </h2>
        <p>
            类型：对象和函数
        </p>
        <p>
            Vue 实例的数据对象;</br>
            data 的属性能够响应数据变化;</br>
            大概来说，data应该只能是数据;</br>
            访问 vm.a 等价于访问 vm.$data.a
        </p>
        <h2>
           五、 computed
        </h2>
        <p>
            类型：{ [key: string]: Function | { get: Function, set: Function } }
        </p>
        <p>
            计算属性将被混入到 Vue 实例中。 所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例
        </p>
        <p>
            注意如果你为一个计算属性使用了箭头函数， 则 this 不会指向这个组件的实例
        </p>
        <p>
            计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。 注意，如果某个依赖 (比如非响应式属性) 在该实例范畴之外，则计算属性是不会被更新的。
        </p>
        <h2>
            六、methods
        </h2>
        <p>
            类型：{ [key: string]: Function }
        </p>
        <p>
            methods 将被混入到 Vue 实例中。</br>
            可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。</br>
            方法中的 this 自动绑定为 Vue 实例。</br>
            可以解决computed缓存的问题
        </p>
        <h2>
            七、watch
        </h2>
        <p>
            类型：{ [key: string]: string | Function | Object | Array }
        </p>
        <p>
            虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器;</br>
            例如在computed计算里面申明了一个PI=3.14，不希望这个值被改变，就可以通过watch来侦听；</br>
        </p>
        <h2>
            八、vm.$el
        </h2>
        <p>
             类型：HTMLElement
        </p>
        <p>
             Vue 实例使用的根 DOM 元素。
        </p>
        <h3>*基本掌握</h3>
    </div>
</body>

</html>